<template>
  <div class="page-container">
    <!-- 系统信息 -->
    <a-card class="system-card">
      <template #title>系统信息</template>
      <a-descriptions :column="2">
        <a-descriptions-item label="系统版本">v1.0.0</a-descriptions-item>
        <a-descriptions-item label="最后更新">2024-02-20</a-descriptions-item>
        <a-descriptions-item label="运行环境">Node.js 18.x</a-descriptions-item>
        <a-descriptions-item label="数据库">MySQL 8.0</a-descriptions-item>
      </a-descriptions>
    </a-card>

    <!-- 用户管理 -->
    <a-card class="user-card">
      <template #title>
        <div class="card-header">
          <span>用户管理</span>
          <a-button type="primary">添加用户</a-button>
        </div>
      </template>
      <a-table :dataSource="users" :columns="userColumns" :pagination="{ pageSize: 5 }">
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'status'">
            <a-tag :color="record.status === '启用' ? 'success' : 'error'">
              {{ record.status }}
            </a-tag>
          </template>
          <template v-if="column.key === 'action'">
            <a-space>
              <a-button type="link" @click="editUser(record)">编辑</a-button>
              <a-button type="link" danger @click="deleteUser(record)">删除</a-button>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-card>

    <!-- 系统设置 -->
    <a-card class="settings-card">
      <template #title>系统设置</template>
      <a-form :model="settings" layout="vertical">
        <a-form-item label="系统名称">
          <a-input v-model:value="settings.systemName" />
        </a-form-item>
        <a-form-item label="数据备份">
          <a-space direction="vertical" style="width: 100%">
            <a-switch v-model:checked="settings.autoBackup" />
            <a-select v-model:value="settings.backupFrequency" style="width: 200px">
              <a-select-option value="daily">每天</a-select-option>
              <a-select-option value="weekly">每周</a-select-option>
              <a-select-option value="monthly">每月</a-select-option>
            </a-select>
          </a-space>
        </a-form-item>
        <a-form-item label="通知设置">
          <a-checkbox-group v-model:value="settings.notifications">
            <a-checkbox value="email">邮件通知</a-checkbox>
            <a-checkbox value="sms">短信通知</a-checkbox>
            <a-checkbox value="system">系统通知</a-checkbox>
          </a-checkbox-group>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" @click="saveSettings">保存设置</a-button>
        </a-form-item>
      </a-form>
    </a-card>

    <!-- 日志查看 -->
    <a-card class="log-card">
      <template #title>
        <div class="card-header">
          <span>系统日志</span>
          <a-space>
            <a-select v-model:value="logLevel" style="width: 120px">
              <a-select-option value="all">全部级别</a-select-option>
              <a-select-option value="error">错误</a-select-option>
              <a-select-option value="warning">警告</a-select-option>
              <a-select-option value="info">信息</a-select-option>
            </a-select>
            <a-button type="primary">导出日志</a-button>
          </a-space>
        </div>
      </template>
      <a-timeline>
        <a-timeline-item
          v-for="log in filteredLogs"
          :key="log.id"
          :color="getLogColor(log.level)"
        >
          <div class="log-item">
            <div class="log-header">
              <span class="log-time">{{ log.time }}</span>
              <a-tag :color="getLogColor(log.level)">{{ log.level }}</a-tag>
            </div>
            <div class="log-content">{{ log.message }}</div>
          </div>
        </a-timeline-item>
      </a-timeline>
    </a-card>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { message } from 'ant-design-vue'

// 用户列表数据
const users = ref([
  {
    key: '1',
    username: 'admin',
    name: '系统管理员',
    role: '超级管理员',
    status: '启用',
    lastLogin: '2024-02-20 10:30'
  },
  {
    key: '2',
    username: 'operator',
    name: '操作员',
    role: '普通用户',
    status: '启用',
    lastLogin: '2024-02-20 09:15'
  },
  {
    key: '3',
    username: 'viewer',
    name: '访客',
    role: '只读用户',
    status: '禁用',
    lastLogin: '2024-02-19 16:45'
  }
])

// 用户表格列定义
const userColumns = [
  {
    title: '用户名',
    dataIndex: 'username',
    key: 'username'
  },
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '角色',
    dataIndex: 'role',
    key: 'role'
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status'
  },
  {
    title: '最后登录',
    dataIndex: 'lastLogin',
    key: 'lastLogin'
  },
  {
    title: '操作',
    key: 'action'
  }
]

// 系统设置
const settings = ref({
  systemName: '制造业智能分析系统',
  autoBackup: true,
  backupFrequency: 'daily',
  notifications: ['email', 'system']
})

// 日志级别
const logLevel = ref('all')

// 系统日志
const logs = ref([
  {
    id: 1,
    time: '2024-02-20 10:30:00',
    level: 'info',
    message: '系统启动成功'
  },
  {
    id: 2,
    time: '2024-02-20 10:15:00',
    level: 'warning',
    message: '数据库连接池接近最大连接数'
  },
  {
    id: 3,
    time: '2024-02-20 09:45:00',
    level: 'error',
    message: '数据同步失败：网络连接超时'
  }
])

// 过滤后的日志
const filteredLogs = computed(() => {
  if (logLevel.value === 'all') return logs.value
  return logs.value.filter(log => log.level === logLevel.value)
})

// 获取日志颜色
const getLogColor = (level) => {
  const colors = {
    info: 'blue',
    warning: 'orange',
    error: 'red'
  }
  return colors[level] || 'blue'
}

// 编辑用户
const editUser = (record) => {
  console.log('编辑用户:', record)
  // 实现编辑用户逻辑
}

// 删除用户
const deleteUser = (record) => {
  console.log('删除用户:', record)
  // 实现删除用户逻辑
}

// 保存设置
const saveSettings = () => {
  console.log('保存设置:', settings.value)
  message.success('设置保存成功')
}
</script>

<style lang="less" scoped>
.system-card,
.user-card,
.settings-card,
.log-card {
  margin-bottom: 16px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.log-item {
  .log-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
  }

  .log-time {
    color: rgba(0, 0, 0, 0.45);
  }

  .log-content {
    color: rgba(0, 0, 0, 0.65);
  }
}
</style> 